<template>
  <view class="goods">
    <mySearch></mySearch>
    <view class="tabs">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        bar-width="200"
        :bar-style="{ backgroundColor: '#f00' }"
        :active-item-style="{ color: '#000' }"
      ></u-tabs>
    </view>
    <scroll-view
      class="main"
      scroll-y
      @scrolltolower="handleScrollToLower"
      refresher-enabled="true"
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="handleRefresherRefresh"
    >
      <navigator v-for="item in goods" :key="item.cat_id" :url="'/pages/goods_detail/goods_detail?id='+item.goods_id">
        <view class="goods-image">
          <u-image
            :src="item.goods_small_logo"
            width="191rpx"
            height="191rpx"
          ></u-image
        ></view>
        <view class="content">
          <view class="goods-title u-line-2">{{ item.goods_name }}</view>
          <view class="goods-price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      params: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 20,
      },
      goods: [],
      total: 0,
      refresherTriggered: false,
    };
  },
  onLoad(options) {
    console.log(options);
    this.params.cid = options.id||5;
    this.getGoods();
  },
  methods: {
    //获取数据
    async getGoods() {
      const res = await this.$u.get("/goods/search", this.params);
      console.log(res);
      this.goods = [...this.goods, ...res.message.goods];
      this.total = res.message.total;
    },
    //下拉刷新
   async handleRefresherRefresh() {
      this.refresherTriggered = true;
      //下拉时将数据清除设为初始状态
      this.goods=[]
      this.params.pagenum = 1
      this.total = 0
     await this.getGoods()
     this.refresherTriggered = false;
    },
    //上拉加载更多
    handleScrollToLower() {
      // console.log(666);
      //判断是否还有数据，没有就不再发请求
      if (this.goods.length >= this.total) {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
        });
        return;
      } else {
        this.params.pagenum++;
        this.getGoods();
      }
    },
    change(index) {
      this.current = index;
    },
  },
};
</script>

.<style lang="scss" scoped>
.goods {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.tabs {
  display: flex;
  u-tabs {
    flex: 1;
  }
}
.main {
  flex: 1;
  overflow: auto;
}
navigator {
  display: flex;
  border-bottom: 5rpx solid #eee;
  .goods-image {
    flex: 1;
  }
  .content {
    flex: 2;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-price {
      color: $themeColor;
    }
  }
}
</style>